<template>
  <page-layout class="project">
    <div class="search-wrapper">
      <div>
        <a-input
          placeholder="请输入项目名称"
          class="search-input"
          v-model="searchText"
        >
          <a-icon
            slot="prefix"
            type="search"
            style="font-size: 28px; color: #999"
          />
        </a-input>
        <a-button type="primary" class="search-button" @click="handelsearch"
          >搜索</a-button
        >
      </div>
      <a-button
        v-if='userInfo.permissions.produce_insert'
        style="width: 120px; height: 54px"
        type="primary"
        @click="
          $router.push({
            path: '/produce/add',
            query: { random: random }
          })
        "
      >
        新增
      </a-button>
    </div>

    <!-- <a-card> -->
    <div class="tabel-wrapper">

      <standard-table
        :columns="columns"
        :dataSource="dataSource"
        @change="onChange"
        :pagination="pagination"
        size="large"
        :loading="loading"
        :scroll="{ x: 1900 }"
      >
       <template slot="version_id" slot-scope="version_id">
         
           <a-tag  v-if="version_id.record.version_id != null"
            style="margin-top: 5px"
             color="blue"
            >
         {{version_id.record.version_id }}
         </a-tag> 
          <a v-else style="color:gray">无版本</a>   
        </template>
        <!-- eslint-disable-next-line -->
        <div slot="action" slot-scope="{ text, record }">
          <!-- {{ record }} -->
          <a
            :href="`#/produce/detail?random=${random}&&id=${record.key}`"
            style="margin-right: 8px"
            >详情</a
          >
          <a
          v-if='userInfo.permissions.produce_edit'
            :href="`#/produce/add?random=${random}&&id=${record.key}`"
            style="margin-right: 8px"
            >| 编辑</a
          >
          <a-popconfirm
          v-if='userInfo.permissions.produce_delete'
            title="确定删除该产品吗?"
            ok-text="是的"
            cancel-text="取消"
            @confirm="() => confirm(record.key)"
            @cancel="() => cancel(record.key)"
          >
            <a>| 删除</a>
          </a-popconfirm>
        </div>
       
      </standard-table>
    </div>
    <a-modal
      v-model="visible"
      centered
      :footer="null"
      :width="700"
      :title="title"
    >
      <div v-html="introduceText" style="padding: 10px; overflow-x: auto"></div>
    </a-modal>
    <!-- </a-card> -->
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import { getProduces, deleteItem } from "@/services/produce";
// import { mapMutations } from "vuex";
const columns = [
   {
    title: "ID",
    dataIndex: "key",
      width: 60
  //   scopedSlots: { customRender: "key" }
  },
   {
    title: "所属部门",
    dataIndex: "department_name",
    width: 100

  },

    {
    title: "产品名称",
    dataIndex: "name",
    // fixed: "left",
    width: 150
  },
 
  {
    title: "版本号",
    dataIndex: "version_id" ,
    scopedSlots: { customRender: "version_id" } ,
    width:60
  },
  {
    title: "负责人",
    dataIndex: "author_name",
    width: 100
  },
  {
    title: "产品简介",
    width: 250,
    dataIndex: "summary",
    scopedSlots: { customRender: "summary" }
  },
  {
    title: "测试负责人",
    dataIndex: "test_name",
    width: 100
  },
  {
    title: "发布负责人",
    dataIndex: "deploy_name",
    scopedSlots: { customRender: "deploy_name" },
    width: 100
  },
  
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 200,
    fixed: "right"
  }
];

export default {
  name: "demand",
  components: { PageLayout, StandardTable },
  data() {
    return {
      userInfo:[] ,
      title: "",
      introduceText: "",
      visible: false,
      searchText: "",
      random: "",
      loading: true,
      desc: "需求管理中心",
      columns,
      dataSource: [],
      selectedRows: [],
      pagination: {
        size: "small",
        showSizeChanger: true,
        showQuickJumper: true,
        poposition: "bottom",
        pageSize: 5,
        current: 1,
        total: 0
      }
    };
  },
  authorize: {
    deleteRecord: "delete"
  },
  activated() {
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
  },
  created() {
       let userInfo = JSON.parse(window.localStorage.getItem('admin.user'))
      this.userInfo = userInfo
    // 初始数据
    const { pageSize, current } = this.pagination;
    this.random = Math.random();
    this.loadTableData({ limit: pageSize, page: current });
  },
  methods: {
    // 请求table 的数据
    // obj 请求的字段
    loadTableData(obj) {
      this.loading = true;
      getProduces(obj).then((res) => {
        // console.log(res.data, 222222);
        // 关闭loading
        this.loading = false;
        if (res.data.code === 20000) {
          const { current_page, total, per_page } = res.data.data;
          Object.assign(this.pagination, {
            total: parseInt(total),
            current: parseInt(current_page),
            pageSize: parseInt(per_page)
          });
          this.dataSource = res.data.data.data.map((item) => {
          
            console.log(item);
            const {
              id,
              author_name,
              department_name,
              name,
              content,
              test_name,
              deploy_name,
              version_id,
              summary,
              created_at
            } = item;
            return {
              key: id,
              created_at: created_at && created_at.split(" ")[0] ,
              version_id:version_id ,
              name: name || "未知",
              deploy_name: deploy_name || "未知",
              author_name: author_name || "未知",
              test_name: test_name || "未知",
              content: content || "无",
              summary: summary || "无",
              department_name: department_name || "未知",
              
            };
          });
        }
      });
    },
    handelsearch() {
      this.loadTableData({
        limit: this.pagination.pageSize,
        name: this.searchText
      });
      // this.searchText = "";
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
      this.selectedRows = this.selectedRows.filter((item) => item.key !== key);
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange(e) {
      // console.log(e);
      const { current, pageSize } = e;
      this.loadTableData({ limit: pageSize, page: current });
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
    cancel(key) {
      this.$message.info(`点击了取消,行数为${key + 1}行`);
    },
    confirm(key) {
      // 发起删除的请求
      deleteItem(key).then((res) => {
        // console.log(res, "delete");
        // 成功
        if (res.data.code === 20000) {
          // 提示信息
          this.$message.success({
            content: res.data.message || "删除成功~"
          });
          // 删除成功后重新获取数据
          const { pageSize, current } = this.pagination;
          this.loadTableData({ limit: pageSize, page: current });
        } else {
          this.$message.error(res.data.message || "删除失败！");
        }
      });
      // this.$message.info(`点击了确定,行数为${key + 1}行`);
      // this.deleteRecord(key);
    }
  }
};
</script>

<style lang="less">
.search-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  > div {
    .search-input input {
      padding-left: 45px !important;
    }
    display: flex;
    width: 60%;
    .ant-input-affix-wrapper {
      display: inline-block;
      width: calc(100% - 150px);
      height: 54px !important;
      input {
        height: 100% !important;
      }
      input::-webkit-input-placeholder {
        color: #9999;
        font-size: 16px;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #9999;
        font-size: 16px;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #9999;
        font-size: 16px;

        font-size: 17px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #9999;
        font-size: 16px;
      }
    }
    .search-button {
      margin-left: 30px;
      width: 120px;
      height: 54px;
    }
  }
}
.project {
  .tabel-wrapper {
    border-radius: 5px;
    // .introduce {
    //   display: inline-block;
    //   width: 120px;
    //   overflow: hidden;
    //   white-space: nowrap;
    //   text-overflow: ellipsis;
    //   // text-align: center;
    // }
    // min-height: 450px;
    background-color: #fff;
    color: #1f1f1f;
    .ant-pagination {
      margin-top: 60px !important;
    }
    .ant-table-thead {
      padding-left: 20px;
      background: #effaff;
      & > tr > th {
        background: #effaff !important;
      }
    }
    .ant-table-tbody {
      padding-left: 20px;
    }
    .ant-table-pagination.ant-pagination {
      float: unset !important;
      text-align: center;
    }
  }
}
</style>
